Components

Ordered and Unordered Lists

Here we have an unordered list.

• first item
  • sub-item
• second item

And next we have an ordered one.

1. first item
   1. sub-item
2. second item

Components

Alerts & Cross-refs

To emphasize specific words or text, you can:

• Use the default .alert class, e.g. important note.
• Use the .fg class for custom colour, e.g. important note.
• Use the .bg class for custom background, e.g. important note.

To cross-reference, you have several options, for example:

• Beamer-like .button class provided by this theme, e.g. Appendix
• Quarto’s native cross-ref syntax, e.g., “See Section 5.3.”

Components

Citations

Citations follow the standard Quarto format and be sourced from BibLaTex, BibTeX, or CLS files. For example:

• Topic 1: Spatial Frictions (Fajgelbaum et al. 2018; Hsieh and Moretti 2019; Moretti 2011)

• Topic 2: Blah (Suárez Serrato and Zidar 2016)

Components

Blocks

Quarto provides dedicated environments for theorems, lemmas, and so forth.

But in presentation format, it’s arguably more effective just to use a Callout Block.

Components

Multicolumn I: Text only

Multicolumn support is very flexible and we can continue with a single full span column in the same slide.

Components

Multicolumn II: Text and figures

Note that sub- and multi-panel figures are also natively supported by Quarto. See here.

Components

Multicolumn III: Code and output

palette("Classic Tableau")

par(
  family = "HersheySans",
  las = 1, pch = 19, cex = 1.5
)

pairs(
  iris[,1:4],
  col=iris$Species
)

Markdown tables

Default table styling

The clean theme rolls its own minimalist aesthetic for tables. This should interface directly with Quarto’s excellent table support.

| fruit  | price  |
|--------|-------:|
| apple  | 2.05   |
| pear   | 1.37   |
| orange | 3.09   |

: Fruit prices {tbl-colwidths="[75,25]"}

Regression tables

Regression example

These aesthetics should carry over to any computation-based tables too.

Let’s take a few slides to illustrate via a simple regression example:

library(fixest)

mods = feols(
  rating ~ complaints + privileges + learning + csw0(raises + critical),
  data = attitude
)

dict = c("rating"     = "Overall Rating",
         "complaints" = "Handling of Complaints",
         "privileges" = "No Special Priviledges",
         "learning"   = "Opportunity to Learn",
         "raises"     = "Performance-Based Raises",
         "critical"   = "Too Critical")

Regression tables

modelsummary

Popular regression table software should play nicely with this theme out of the box. Here’s an example using modelsummary (with the default tinytable backend¹). See the next slide for the resulting table.

library(modelsummary) # Make sure you have >=v2.0.0

modelsummary(
  setNames(mods, c("(1)", "(2)")),
  coef_map = dict, stars = TRUE,
  gof_map = NA
  ) |>
  # some optional stylistic tweaks
  tinytable::group_tt(j = list("Dep. variable: Overall Rating" = 2:3)) |>
  tinytable::style_tt(i = 1:2, j = 2:3, background = "pink")

Regression tables

etable

fixest’s powerful native tabling functions were designed for LaTeX output. But we can use the markdown = TRUE option to make them work with this theme too. (Details here.) Quick notes:

• Install the tinytex & pdftools packages first.
• Set the R chunk option output: asis.

```{r}
#| output: asis

setFixest_etable(markdown = TRUE, drop = "Constant")
setFixest_dict(dict)

etable(mods, highlight = .("se" = "complaints"))
```

Regression tables

etable (cont.)

Figure

Figure

Full-size Figures

You can use the {.background-image} container environment to completely fill the slide background with an image.

Ideally, your figure will be the same aspect ratio as the screen that you’re presenting on.

• This can be a bit tricky because of the dynamic nature of reveal.js / HTML. But it’s probably something close to 16:9.
• Aspect ratio can also matter for a regular full-frame images (previous slide).

Interactive plots

Note: Simple flight data example using threejs. There are many interactive plotting options beyond this. (More details.)

Other

What else can the clean theme do?

We have highlighted some theme-specific components in this demo.

But please note that all of the standard reveal.js functionality and plugins are compatible with the clean theme. This includes:

• chalkboard for annotating slides.
• multiplex for enabling audience navigation of your slides.
• pdf printing in case you don’t have access to a web browser.
• Etc.

Summary

A minimal and elegant presentation theme

The Quarto reveal.js clean theme aims to be a minimal and elegant presention theme. Here are some options to get you started.

Add the theme to an existing project.

quarto install extension grantmcdermott/quarto-revealjs-clean

… or, create a new project using our lean template.

quarto use template grantmcdermott/quarto-revealjs-clean

… or, create a new project using these demo slides as a full template.

quarto use template grantmcdermott/quarto-revealjs-clean-demo

Appendix

	Unique	Missing Pct.	Mean	SD	Min	Median	Max	Histogram
rating	22	0	64.6	12.2	40.0	65.5	85.0
complaints	23	0	66.6	13.3	37.0	65.0	90.0
privileges	24	0	53.1	12.2	30.0	51.5	83.0
learning	23	0	56.4	11.7	34.0	56.5	75.0
raises	21	0	64.6	10.4	43.0	63.5	88.0
critical	21	0	74.8	9.9	49.0	77.5	92.0
advance	20	0	42.9	10.3	25.0	41.0	72.0

Back to main